import { defineComponent, reactive, toRefs, ref, Ref } from 'vue'
import {
  NInput,
  NForm,
  NFormItem,
  NModal,
  NSelect,
  SelectOption
} from 'naive-ui'
import { getMenuRoles, grantRoleReq } from '@/service/modules/menu'
import { Response } from '@/service/modules/common/types'
import { Role } from '@/service/modules/user/types'
import { renderMultipleSelectTag } from '@/common/common'
import { useRole } from '@/views/user/common/use-role'

const RoleGrantModal = defineComponent({
  name: 'RoleGrantModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    menu: {
      type: Object,
      required: true,
      default: {}
    }
  },
  emits: ['modalShowChange'],
  setup() {
    const state = reactive({
      // modPwdFormRef: ref(),
      menuForm: {
        id: 0,
        name: ''
      },
      positiveButtonDisabled: false
    })
    const roleValues: Ref<number[]> = ref([])
    //系统角色下拉选项
    const { roleVariables, getRoleOptions } = useRole()
    getRoleOptions(0)
    const roleOptions: SelectOption[] = roleVariables.roleOptions

    return {
      ...toRefs(state),
      roleValues,
      roleOptions
    }
  },
  watch: {
    //给表单赋值
    menu() {
      this.menuForm.id = this.menu.id
      this.menuForm.name = this.menu.name
    }
  },
  updated() {
    //获取当前菜单授权的角色
    this.getRoleValues(this.menu.id)
  },
  methods: {
    async getRoleValues(id: number) {
      this.roleValues.splice(0)
      const res = await getMenuRoles({ menuId: id })
      if (res.resp_code === 0) {
        const roles = res.data as Role[]
        roles.map((item) => {
          this.roleValues.push(item.id)
        })
      }
    },
    async onPositiveClick() {
      //提交授权角色请求
      this.positiveButtonDisabled = true
      const roleIds: number[] = []
      this.roleValues.forEach((item) => {
        roleIds.push(item)
      })
      const res: Response<any> = await grantRoleReq({
        menuId: this.menuForm.id,
        roleIds: roleIds + ''
      }).catch(() => {
        this.positiveButtonDisabled = false
      })
      if (res.resp_code === 0) {
        this.$emit('modalShowChange', false)
      } else {
        this.positiveButtonDisabled = false
      }
    },
    onNegativeClick() {
      this.$emit('modalShowChange', false)
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('menu.menuRoleGrantTitle')}
        bordered={false}
        size='huge'
        preset='dialog'
        positive-text={window.$t('dialog.positiveText')}
        negative-text={window.$t('dialog.negativeText')}
        onPositiveClick={this.onPositiveClick}
        onNegativeClick={this.onNegativeClick}
        onClose={this.onNegativeClick}
      >
        <NForm
          label-placement='left'
          require-mark-placement='right-hanging'
          label-width='auto'
        >
          <NFormItem path='name' label={window.$t('menu.name')}>
            <NInput
              type='text'
              v-model={[this.menuForm.name, 'value']}
              placeholder={window.$t('menu.name')}
              disabled={true}
            />
          </NFormItem>
          <NFormItem path='roles' label={window.$t('menu.roles')}>
            <NSelect
              v-model={[this.roleValues, 'value']}
              multiple
              options={this.roleOptions}
              render-tag={renderMultipleSelectTag}
            />
          </NFormItem>
        </NForm>
      </NModal>
    )
  }
})

export default RoleGrantModal
